/* Common button styles */

$btn_color:#333;
$btn_bg_color:#7986cb;
$btn_bg_color_op:rgba(121, 134, 203, .3);
.button-con {
    display: inline-block;
    .button {
        vertical-align: middle;
        position: relative;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -moz-osx-font-smoothing: grayscale;
        margin: rem(10);
        padding: rem(10) rem(20);
        color: $btn_color;
        border: 1px solid $btn_color;
        border-radius: rem(10);
        background: white;
        font-size: $size_middle;
        display: inline-block;
        span {
            font-size: $size_middle;
            vertical-align: middle;
        }
    }
    .button::before span,
    .button::after span {
        font-size: $size_middle;
    }
    .button:focus {
        outline: none;
    }
    .button>span {
        vertical-align: middle;
    }
    .button:hover {
        opacity: .8;
    }
    .button.button--inverted {
        color: white;
        background: $btn_bg_color;
        border-color: $btn_bg_color;
    }
    button.button[disabled],
    button.button[disabled]:hover {
        background: #ccc;
        opacity: .8;
        border: 1px solid #333;
        color: #333;
    }
    /* Winona */
    .button--winona {
        // overflow: hidden;
        padding: 0;
        -webkit-transition: border-color 0.3s, background-color 0.3s;
        transition: border-color 0.3s, background-color 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .button--winona::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0);
    }
    .button--winona>span {
        display: block;
    }
    .button--winona::before,
    .button--winona>span {
        padding: rem(10) rem(20);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .button--winona:hover::before {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .button--winona:hover>span {
        opacity: 0;
        -webkit-transform: translate3d(0, -25%, 0);
        transform: translate3d(0, -25%, 0);
    }
    /* Nina */
    .button--nina {
        // overflow: hidden;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }
    .button--nina>span {
        display: inline-block;
        opacity: 0;
        -webkit-transform: translate3d(0, rem(-10), 0);
        transform: translate3d(0, rem(-10), 0);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .button--nina::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: rem(10) 0;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
        transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    }
    .button--nina:hover::before {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    .button--nina:hover>span {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    @for $i from 1 through 20 {
        .button--nina:hover>span:nth-child(#{$i}) {
            -webkit-transition-delay: (0.045s * $i);
            transition-delay: (0.045s * $i);
        }
    }
    /* Wayra */
    .button--wayra {
        overflow: hidden;
        -webkit-transition: border-color 0.3s, color 0.3s;
        transition: border-color 0.3s, color 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .button--wayra::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 150%;
        height: 100%;
        background: $btn_bg_color;
        z-index: -1;
        -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
        transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
        -webkit-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
        transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
    }
    .button--wayra:hover {
        color: #fff;
        border-color: $btn_bg_color;
    }
    .button--wayra.button--inverted:hover {
        color: $btn_bg_color;
        border-color: #fff;
    }
    .button--wayra:hover::before {
        opacity: 1;
        background-color: $btn_bg_color;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
        -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .button--wayra.button--inverted:hover::before {
        background-color: #fff;
    }
    /* Moema */
    .button--moema::after {
        content: '';
        position: absolute;
        top: rem(-10);
        left: rem(-10);
        bottom: rem(-10);
        right: rem(-10);
        background: inherit;
        border-radius: rem(10);
        z-index: -1;
        opacity: 0.4;
        -webkit-transform: scale3d(0.8, 0.5, 1);
        transform: scale3d(0.8, 0.5, 1);
    }
    .button--moema:focus {
        -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
        transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
        -webkit-animation: anim-moema-1 0.3s forwards;
        animation: anim-moema-1 0.3s forwards;
    }
    .button--moema:focus::after {
        -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
        animation: anim-moema-2 0.3s 0.3s forwards;
    }
    @keyframes anim-moema-1 {
        60% {
            -webkit-transform: scale3d(0.8, 0.8, 1);
            transform: scale3d(0.8, 0.8, 1);
        }
        85% {
            -webkit-transform: scale3d(1.1, 1.1, 1);
            transform: scale3d(1.1, 1.1, 1);
        }
        100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    @keyframes anim-moema-2 {
        to {
            opacity: 0;
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
        }
    }
    /* Wapasha */
    .button--wapasha::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border: 2px solid $btn_color;
        z-index: -1;
        border-radius: inherit;
        opacity: 0;
    }
    .button--wapasha.button--inverted::after {
        border-color: white;
    }
    .button--wapasha:focus::after {
        animation: wapasha .3s linear forwards;
    }
    @keyframes wapasha {
        0% {
            transform: scale3d(0.6, 0.6, 1);
            opacity: 0;
        }
        100% {
            transform: scale3d(1, 1, 1);
            opacity: 1;
        }
    }
    /* Wapasha */
    .button--wave {
        overflow: hidden;
        div {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background: $btn_bg_color_op;
            position: absolute;
            animation: bian 0.5s linear both 1;
        }
        @keyframes bian {
            0% {
                opacity: 1;
                transform: scale(1)
            }
            100% {
                opacity: 0;
                transform: scale(8)
            }
        }
    }
    .button--wave.button--inverted {
        div {
            background: rgba(255, 255, 255, .3);
        }
    }
}